<template>
  <div class="Order">
    <div class="Inner">
      <div class="item" v-for="(item, index) in films" :key="index">
        <img :src="item.film.cover" alt="" />
        <span>《{{ item.film.name }}》</span>
        <div class="itemMsg">
          <span>
            座位:
            <span> {{ item.order.seats }}, </span>
          </span>
          <span> 下单时间:{{ item.order.createTime }}</span>
          <span v-if="item.order.status === 2"
            >支付时间:{{ item.order.payAt }}</span
          >
        </div>
        <!-- 金额和删除按钮 -->
        <span>￥{{ item.order.price }}</span>
        <div class="status">
          <span v-if="item.order.status === 2" class="success">支付成功</span>
          <span v-if="item.order.status === 0" class="wait">等待支付</span>
          <span v-if="item.order.status === 1" class="fail">订单异常</span>
          <span v-if="item.order.status === 3" class="fail">取消支付</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMyOrder } from "@/api/user.js";
export default {
  name: "Order",
  data() {
    return {
      films: [
        {
          name: "1",
          url: require("@/assets/Home/u2097.svg"),
          seats: ["4-5", "4-6"],
          ordertime: "2022-01-20 14:25:23",
          paytime: "",
          ispayment: 2,
          price: 45,
          arrangement: {
            id: "",
          },
          film: {
            id: "",
            name: "",
            cover: "",
          },
          user: {
            id: "",
          },
          order: {
            id: "",
            seats: "",
            price: 0,
            status: "",
            payAt: "",
            createTime: "",
          },
        },
      ],
    };
  },
  methods: {
    getOrder: function () {
      getMyOrder(localStorage.getItem("uid")).then((res) => {
        if (res.code === 200) {
          this.films = res.data;
        } else {
          this.$message({
            message: "登录信息有误,请重新登陆",
            type: "warning",
          });
        }
      });
    },
  },
  mounted() {
    this.getOrder();
  },
};
</script>

<style scoped lang="less">
.Order {
  position: absolute;
  width: 1100px;
  height: 700px;
  overflow: auto;
  .Inner {
    .item {
      margin: 0 auto;
      margin-top: 10px;
      position: relative;
      height: 145px;
      border: 1px solid gray;
      width: 90%;
      box-shadow: 3px 3px 5px gray;
      img {
        width: 84px;
        position: absolute;
        left: 40px;
        top: 15px;
      }
      .checkbox {
        position: absolute;
        left: 10px;
        top: 65px;
      }
      .itemMsg {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 150px;
        top: 50px;
      }
      .itemMsg > span {
        margin-top: 3px;
        color: gray;
      }
      .status {
        position: absolute;
        right: 10px;
        top: 58px;
        span {
          font-size: 20px;
        }
        .success {
          color: #71d739;
        }
        .fail {
          color: #f38a41;
        }
        .wait {
          color: #4190f3;
        }
      }
    }
    .item > span:nth-child(2) {
      position: absolute;
      left: 140px;
      top: 20px;
      font-size: 20px;
    }
    .item > span:nth-child(4) {
      color: red;
      font-size: 18px;
      position: absolute;
      top: 60px;
      right: 150px;
    }
  }
}
</style>